<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery评论页星星打分动画效果</title>


	<!--自定义工具-->
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/HttpUtil.js"></script>
	<!--参数校验工具-->
	<script src="validation-1.19.2/jquery.validate.min.js"></script>
	<script src="validation-1.19.2/localization/messages_zh.min.js"></script>
	<!--导入 vue 包-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<!--代码部分begin-->
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
/*quiz style*/
.quiz{border:solid 1px #ccc;height:270px;width:772px; margin:0 auto;}
.quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}
.quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}
.quiz_content .btm{border:none;width:100px;height:33px;background:url(images/btn.gif) no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}
.quiz_content li.full-comment{position:relative;z-index:99;height:41px;}
.quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}
.quiz_content li.cate_l dl dt{float:left;}
.quiz_content li.cate_l dl dd{float:left;padding-right:15px;}
.quiz_content li.cate_l dl dd label{cursor:pointer;}
.quiz_content .l_text{height:120px;position:relative;padding-left:18px;}
.quiz_content .l_text .m_flo{float:left;width:47px;}
.quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}
.quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}
/*goods-comm-stars style*/
.goods-comm{height:41px;position:relative;z-index:7;}
.goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}
.goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}
.goods-comm-stars .star_choose{float:left;display:inline-block;}
/* rater star */
.rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}
.rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}
.rater-star-item{background-position: -100% -100%;}
.rater-star-item-hover{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current.rater-star-happy{background-position:0 -25px;}
.rater-star-item-hover.rater-star-happy{background-position:0 -25px;}
.rater-star-item-current.rater-star-full{background-position:0 -72px;}
/* popinfo */
.popinfo{display:none;position:absolute;top:30px;background:url(images/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}
.popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}
.popinfo .info-box div{color:#333;}
.rater-click-tips{font-size: 12px;color:#333;margin-left:10px;background:url(images/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}
.rater-click-tips span{display:block;background:#FFF9DD url(images/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}
.rater-star-item-tips{background:url(images/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}
.cur.rater-star-item-tips{display:block;}	
.rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}
</style>

<div id="comment">
	<div class="quiz" v-for="(item,index) in good_list" style="margin-top: 15px;margin-bottom: 15px">
		<h3>{{ item.goodShop }}---{{item.goodId}}</h3>
		<div class="quiz_content">
			<form action="" id=" " method="post">
				<div class="goods-comm">
					<div class="goods-comm-stars">
						<span class="star_l">满意度：</span>
						<div id="rate-comm-1" class="rate-comm">
							<!--<input type="text" class="userF"/>-->
							1分<input type="radio" name="address" value="1" />
							2分<input type="radio" name="address" value="2" />
							3分<input type="radio" name="address" value="3" />
							4分<input type="radio" name="address" value="4" />
							5分<input type="radio" checked="checked" name="address" value="5" />
						</div>
					</div>
				</div>

				<div class="l_text">
					<label class="m_flo">内  容：</label>
					<textarea name="" class="text userP"></textarea>
					<span class="tr">字数限制为5-200个</span>
				</div>
			</form>
			<button class="btm" type="submit" @click="submitOrder(item,index)"></button>
		</div><!--quiz_content end-->
	</div><!--quiz end-->
	<button style="font-size: 30px;width :800px; height: 60px; border-radius: 20px; margin-left: 23.3%;margin-top: 20px" @click="commentOk()"><strong> 完成评论 </strong></button>

</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/1.4.2/jquery-1.4.2.min.js"></script>
<script src="js/comment.js"></script>
<!--代码部分end-->
</body>
</html>

<script>
	var vm1 = new Vue({
		el: '#comment',
		data: {
			good_list: [],
			userMessage: [],
		},
		methods: {
			//ajax获取用户订单列表
			getGoodsOrderList: function () {
				let vue_quote = this;

				//获取用户登录信息
				var cookie = getCookie("userMassage");
				var user = JSON.parse(cookie);
				vue_quote.userMessage=user;
				console.log(this.userMessage.userID);

				//获取后台数据
				let url = "order/searchOrderByOrderNumber.do";
				let orderNumber = getUrlParam("orderNumber");
				let params={
					orderNumber:orderNumber,
					userId:user.userID
				}

				/**
				 * 发起POST方式的ajax请求，获取后台数据
				 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
				 */
				postWithJson(url, params, function (data) {
					console.log(data);
					vue_quote.good_list = data.good;
					console.log(vue_quote.good_list);
				});
			},

			submitOrder: function(goods,index){
				/*获取评论内容*/
				let user_f=[];
				user_f= $("input[name='address']:checked").val();
				/*let user_f=[];
				user_f=document.getElementsByClassName('userF');*/
				let user_p=[];
				user_p=document.getElementsByClassName('userP');

				var uf = user_f[index];
				console.log("这是一条。。。"+uf);
				if (uf==''){//控制不为空
					alert("评分不能为空！")
				}else {
					var up = user_p[index].value;
					//获取后台数据
					let url = "/comment/addComment.do";

					var uId = this.userMessage.userID;
					var gId = goods.goodId;


					console.log("uid："+uId);
					console.log("gid:"+gId);

					let params = { userId: uId, goodId: gId, userScore: uf, userContent: up };
					console.log(params);
					postWithParams(url,params,function (data) {
						console.log(data)
					}),
					this.good_list.splice(index, 1);
					$(".userP").val("");
				}

				console.log(user_f[index].value);
				console.log(user_p[index].value);
				console.log(index)
				console.log(goods)
			},
			commentOk() {
				let url = "order/updateOrder.do";
				let orderNumber = getUrlParam("orderNumber");

				let params={
					orderNumber:orderNumber,
					userId:this.userMessage.userID,
					orderStatus:4
				}
				postWithJson(url,params,function (data) {
					console.log(data);
					location.href=appendBeforeHost("user_order.html");
				})
			},
		},

		/**页面加载完成后调用*/
		mounted: function () {
			this.getGoodsOrderList();
		}
	});




</script>